<div class="input-group"> <input class="form-control" id="appendedInputButtons" type="text" placeholder="Placeholder .." /> <div class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-search"></i></button></div> <div class="input-group-btn"><button class="btn btn-default" type="button">Options</button></div> </div>
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<div class="row"> <div class="col-xs-3"> <input type="text" class="form-control" placeholder="col 3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder="col 4"> </div> <div class="col-xs-5"> <input type="text" class="form-control" placeholder="col 5"> </div> </div>
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control col-md-10" id="appendedPrependedInput" type="text" placeholder="100,000,000" /> <span class="input-group-addon">.00</span> </div>
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<input type="text" placeholder="Text input" class="form-control" />
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<input type="text" placeholder="Disabled Input" class="form-control " disabled />
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<div class="input-group"> <input class="form-control" id="appendedDropdownButton" type="text" /> <div class="input-group-btn"> <div class="dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div>
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<div class="input-group"> <span class="input-group-addon">@</span> <input id="prependedInput" class="form-control col-md-12" type="text" placeholder="Username" /> </div>
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<input class="form-control" id="focusedInput" type="text" value="This is focused...">
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<div class="input-group"> <input type="text" class="form-control" /> <div class="input-group-btn btn-group dropup"> <button class="btn btn-default" tabindex="-1">Action</button> </div> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div>
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<input type="text" class="form-control" placeholder="Help Block below Input"> <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">User</label> <div class="col-sm-10"> <p class="form-control-static">mosaicpro</p> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label class="checkbox-custom"> <i class="fa fa-fw fa-square-o"></i> <input type="checkbox" checked="checked"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form>
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less"; @import "http://localhost/shared/components/modules/admin/forms/elements/fuelux-checkbox/fuelux-checkbox.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/forms/elements/fuelux-checkbox/fuelux-checkbox.js?v=v1.2.3"></script>
<input type="text" placeholder="Large Input" class="form-control input-lg" />
@import "assets/components/core/less/forms.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.